I have implemented a barcode scanner which uses mobile cameras to decode and populate a search field . This field has autocomplete function while typing:

For example: database has - 1234, 938, 18279, 3920, 5781

If I type in the search bar "18" it will automatically select 18279 as there are no other options in database

This usually works regularly with barcode scanners (hardware) as they are acting as an input.

However when I use this html5/js based barcode scanner, it is decoding the result and pasting them in the search box however the autocomplete/search function is not working.

This is my code

function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        document.getElementById("search_product").value = ''; 
        beep();
        ++countResults;
        lastResult = decodedText;
        console.log(`Scan result ${decodedText}`, decodedResult);
        document.getElementById("search_product").focus();
        document.getElementById("search_product").value = decodedText;
    }
}

I think the issue is with .value as it is changing the field value rather than "inputting" the result. Are there any alternatives to .value which might solve my issue?